<template>
  <div class="AllArea">
    <div class="AllArea-header">
<div class="AllArea-logo">
  logo
</div>
<div class="AllArea-search">
  <el-input   placeholder="龙南蜂蜜" style="width: 400px;" />
  <el-button type="primary" >搜索</el-button>
</div>
</div>
    <div class="AllArea-area"  style="width: 1200px;">
      <span @click="setallarea">全部地区</span>
      <span v-for="(item,index) in AreaList" :key="index" @click="getkind(item)">{{item.name }}</span>
    </div>
    <div class="AllArea-kind">
      <span @click="setallSort">全部种类</span>
      <span v-for="(item,index) in kindList" :key="index" @click="getArea(item)">{{item.name }}</span>
    </div>
    <div class="AllArea-shangping">
      <h2 style="text-align: center;">推荐商品</h2>
      <div class="AllArea-shangpin" v-infinite-scroll="AllArealoading"  v-for="(item1,index1) in AllAreashop" :key="index1"  v-show="index1<51" style="width: 250px;height: 400px;background: powderblue;display:inline-block; margin-right: 25px;">

          <div style="width: 250px;height: 400px;background: powderblue;display:inline-block; margin-right: 25px; vertical-align: top;">
        <el-image  :src="item1.photo" width="250" height="300" style="float: left;" lazy>
        </el-image>
        商品名称：{{item1.name }} 
         价钱：{{item1.price }}
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import axios from '@/utils/request';
export default {
 name:'AllArea',
 data(){
  return{
    categoryName:'',//种类
    originName:'',//地区
    selectbool:false,
    AreaCheck:false,
    SortCheck:false,
   AllAreabool:true,
   AllAreaload:16,
      AllAreashop:[],
      AreaList:[],
      kindList:[],
  }
 },
 methods:{
  //加载
  AllArealoading(){
    //全局变量
if(this.AllAreabool){//第一次执行，之后五秒内不再执行
	//此处写需要触发的函数\方法
  this.AllAreaload+=8
  // console.log(this.AllAreaload);
   this.AllAreabool = false
   setTimeout(()=>{
      this.AllAreabool = true
   },2000)
}else{
  //  console.log('不执行')
}
  },
  setallarea(){
    this.originName=''
    this.AreaCheck=false
    const params={
        categoryName:this.categoryName,//种类
        originName:this.originName//地区
      }
    axios.post('/select/mutil',JSON.stringify(params)).then(res=>{
      this.AllAreashop=res.data })
  },
  setallSort(){
    this.categoryName=''
    this.SortCheck=false
    const params={
        categoryName:this.categoryName,//种类
        originName:this.originName//地区
      }
    axios.post('/select/mutil',JSON.stringify(params)).then(res=>{
      this.AllAreashop=res.data })
  },
  getArea(kind){
    this.categoryName=kind
    const params={
        categoryName:kind,//种类
        originName:this.originName//地区
      }
      if((!this.AreaCheck)){
      this.selectSortCheck=true
    axios.post('/select/selcategory',JSON.stringify(params)).then(res=>
   
    { console.log(res)
     this.AreaList=res.data}
    )
  }
//获取商品信息
      axios.post('/select/mutil',JSON.stringify(params)).then(res=>{
      this.AllAreashop=res.data
      ;
    })
  },
  getkind(area){
    this.originName=area
    const params={
        categoryName:this.categoryName,//种类
        originName:area//地区
      }
      if((!this.SortCheck)){
      this.AreaCheck=true
    axios.post('/select/selorigin',JSON.stringify(params)).then(res=>{  
      this.kindList=res.data
    console.log(this.kindList);}
    )
  }
      axios.post('/select/mutil',JSON.stringify(params)).then(res=>{
      this.AllAreashop=res.data})
  },
  getall(){
    const params={
        categoryName:this.categoryName,//种类
        originName:this.originName//地区
      }
      axios.post('/select/mutil',JSON.stringify(params)).then(res=>
    {this.AllAreashop=res.data,
    console.log(this.AllAreashop)
    // console.log(this.AllAreashop);
    // console.log(1)
  }
    )
    axios.get('/select/selallorigin').then(res=>{
      // console.log(res.data);
      this.AreaList=res.data
      // console.log(this.AreaList);
    })
    axios.get('/select/selallcategory').then(res=>{  
      this.kindList=res.data
    // console.log(this.kindList);
  }
    )
  }
    
  },
   
 mounted(){
  this.getall()
 }
}
</script>

<style>
.AllArea{
  width: 1200px;
  margin: 0 auto;
  background-color: salmon;
}
.AllArea-search{
 float: left;
 margin-top: 50px;
}
.AllArea-header{
  height: 200px;
  background-color: green;
}
.AllArea-logo{
  float: left;
  width: 150px;
  height: 150px;
  background-color: skyblue;
}
.AllArea-shangping{
  margin: 0 auto;
  text-align: center;
  width: 1200px;
  background-color: gold;
}
.AllArea-kind span{
  /* float: left; */
  margin-left: 5px;
}
.AllArea-search{
  margin-left: 300px;
}
/* .AllArea-area{ */
  /* background-color: #fff; */
  /* width: 1210px; */
  /* height: 10px; */
/* } */
.AllArea-area span{
  /* float: left; */
margin-left: 5px;
}
</style>